<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>超过三百兆的文件最好压缩一手</title>
</head>
<body>

    <p>
        <input type="file" id="uploadfile" />
    </p>

    <p>
        <button id="upload">上传文件</button>
    </p>

    <p>
        <button id="getfile">获取文件</button>
        <input type="text" id="filename" />
    </p>

    <p>
        <button id="download">下载文件</button>
    </p>

    <p>
        <button id="getdownload">GET下载文件</button>
    </p>
    <p>
        <a id="doget" href="#">get</a>
    </p>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    // 注册按钮的点击事件
    $(document).ready(() => {

        // 下载文件按钮点击事件
        $("#download").on("click", () => {

            // POST传的参数
            var options = {
                url: '/download',
                data: { type_id: 1, filename: $("#filename")[0].value }
            };

            // 合并post方法和上面的参数
            var config = $.extend(true, { method: (options.method || 'post') }, options);

            // 网页创建一个提交的表单（如果post直接带上面参数就行）
            var $iframe = $('<iframe id="down-file-iframe" />');
            var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
            $form.attr('action', config.url);
            for (var key in config.data) {
                $form.append('<input type="hidden" name="' + key + '" value="' + config.data[key] + '" />');
            }
            $iframe.append($form);

            // 把表单加进来，提交表单，移除表单
            $(document.body).append($iframe);
            $form[0].submit();
            $iframe.remove();


            console.log("download");

        })

        // 上传文件按钮点击事件
        $("#upload").on("click", () => {

            // 提交的数据（文件就是选择的文件）
            var formData = new FormData();
            formData.append("file", $("#uploadfile")[0].files[0]);
            formData.append("type_id", 1);

            // 直接发送post请求
            $.ajax({
                url: '/FileServer/fileupload',
                type: 'post',
                data: formData,
                contentType: false,
                processData: false,
                success: function (res) {
                    console.log(res);
                }
            })


            console.log("upload");

        })

        // 获取文件按钮点击事件
        $("#getfile").on("click", () => {

            // 直接发送get请求
            $.ajax({
                url: '/getfile',
                type: 'get',
                contentType: false,
                processData: false,
                success: function (res) {
                    console.log(res);
                }
            })


            console.log("getfile");

        })


        // GET下载文件按钮点击事件
        $("#getdownload").on("click", () => {

            var filename = $("#filename")[0].value;
            var filenameURI = encodeURI(filename);

            document.getElementById("doget").href = 'http://localhost:8080/FileServer/uploads/' + filenameURI;

            // 直接发送get请求
            //$.ajax({
            //    url: '/FileServer/uploads/' + $("#filename")[0].value,
            //    type: 'get',
            //    contentType: false,
            //    processData: false,
            //    success: function (res) {
            //        console.log(res);
            //    }
            //})


            console.log("Getdownload");

        })
    })
</script>
</html>